<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h1>登录页面</h1>
<form action="#" onsubmit="return false">
用户名: <input type="text" name="uname" placeholder="请输入用户名"/><span></span><br/>
密&nbsp码:<input type="password" name="pwd" placeholder="请输入密码"/><span></span><br/>
</form>
<p></p>
<button>登录</button>
</body>
<script>
  // 用户名验证:
  var uname = document.getElementsByName("uname")[0];
    var userinput=function () {
    var nameval = uname.value.trim();
    var spanname = document.getElementsByTagName("span")[0];
      // 1.用户名不能为空
        if(nameval.length==0){
          spanname.innerText="*用户名不能为空";
          spanname.style.color="red";
          return false;
        }
        // 2.用户名必须在3-10位
      if(nameval.length<3||nameval.length>10){
        spanname.innerText="*用户名必须在3-10位";
        spanname.style.color="red";
        return false;
      }
      spanname.innerText="√";
      spanname.style.fontWeight="bold";
      return true;
    };

    // 密码验证:
  var pwd = document.getElementsByName("pwd")[0];
    var pwdinput=function () {
      var pwdval = pwd.value.trim();
      var spanpwd = document.getElementsByTagName("span")[1];
      // 1.密码不能为空:
      if(pwdval==""){
        spanpwd.innerText="*密码不能为空";
        spanpwd.style.color="red";
        return false;
      }
      // 2.密码必须在3-10位
      if(pwdval.length<3||pwdval.length>10){
        spanpwd.innerText="*用户名必须在3-10位";
        spanpwd.style.color="red";
        return false;
      }
      spanpwd.innerText="√";
      spanpwd.style.fontWeight="bold";
      return true;
    };

    document.getElementsByTagName("button")[0].onclick=function (ev) {
      if(userinput()==true&&pwdinput()==true){
        var link=new XMLHttpRequest();
        link.open("get","index.json","true");
        link.send();
        link.onreadystatechange=function (ev1) {
          if(link.readyState==4&&link.status==200){
              console.log(JSON.parse(link.responseText));
              var a=JSON.parse(link.responseText);
            var nameval = uname.value.trim();
            var pwdval = pwd.value.trim();
            var i=4;
            if(a.myname==nameval&&a.mypwd==pwdval){
              setInterval(function () {
                i--;
                document.getElementsByTagName("p")[0].innerText=i+"秒后自动跳转";
                if(i==0){
                  window.location.href="index.html";
                }
              },1000);
            }else {
              document.getElementsByTagName("p")[0].innerText="用户名或密码错误";
            }
          }
        }
      }
    }
</script>
</html>
